<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>张家口集训课堂管理</title>
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <script src="../static/js/socket.io.min.js"></script>
    <link rel="stylesheet" href="../static/css/index_bak.css">
</head>
<body class="bg">
<div id="class_name" class="header"
     onclick="javascript:window.location.href='http://23.128.56.2:8081/user/pageB2'"></div>
<div class="tab1">
    <div id="status" class="note">
        {% if class_msg %}
            {{ class_msg[5]|safe }}
        {% else %}
            无
        {% endif %}
    </div>
    <div id="infotab" class="infotab">
        <div id="leader_name" class="duty">
            {% if class_msg %}
                {{ class_msg[4] }}
            {% else %}
                无
            {% endif %}
        </div>
        <div id="weather" class="weather">
            {% if class_msg %}
                {{ now_time }}{{ class_msg[6] | safe }}
            {% else %}
                无
            {% endif %}
        </div>
    </div>
</div>

<div class="tab4">
    <div id="imgdiv" class="imgdiv">
        <img id="pic_url" class="imgclass" src="../static/img/mantle.png" alt="">
    </div>
</div>
<div class="tab5">
    <div class="info_qd">
        <p id="name" class="lab"></p>
        <p id="job" class="lab"></p>
        <p id="unit" class="lab"></p>
        <p id="group" class="lab"></p>
        <p id="insert_time" class="lab"></p>
    </div>
</div>
<div class="tab2">
    <div id="should_num" class="yd">
		200
    </div>
    <div id="people_num" class="sd">
		0
    </div>
    <div id="sick_num" class="qj">
		10
    </div>
    <div id="lose_num" class="wd">
		190
    </div>
</div>

<div class="tab3">
    <div id="yd1" class="yd1">
        培训班应到
    </div>
    <div id="sd1" class="sd1">
        实到
    </div>
    <div id="qj1" class="qj1">
        因故请假
    </div>
    <div id="wd1" class="wd1">
        未按时报到
    </div>
</div>
<script>
    //监听图片改变时执行
    var flag;
    $("#imgdiv").find('img').on('load', function () {
        // alert(2);
        if ($('#pic_url').attr('src') !== '../static/img/mantle.png') {
            clearTimeout(flag);
            flag = setTimeout(function () {
                // alert(2);
                $('#pic_url').attr("src", "../static/img/mantle.png");
                $('#name').text('');
                $('#job').text('');
                $('#unit').text('');
                $('#group').text('');
                $('#insert_time').text('');
            }, 30000);
        }
    });
    $(document).ready(function () {
        namespace = '/pageB';
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
        socket.on('pageB', function (res) {
            var name = res.name;
            if (name) {
                $("#name").html(name);
            }
            var job = res.job;
            if (job) {
                $("#job").html(job);
            }
            var unit = res.unit;
            if (unit) {
                $("#unit").html(unit);
            }
            var group = res.group;
            if (group) {
                $("#group").html(group);
            }
            // {#签到时间#}
            var insert_time = res.insert_time;
            if (insert_time) {
                $("#insert_time").html(insert_time);
            }
            var pic_url = res.pic_url;
            if (pic_url) {
                $("#pic_url").attr('src', pic_url);
            }
            // {#应到人数#}
            var should_num = res.should_num;
            if (should_num) {
                $("#should_num").html(should_num);
            }
            // {#请假人数#}
            var sick_num = res.sick_num;
            if (sick_num) {
                $("#sick_num").html(sick_num);
            }
            // {#未到人数#}
            var lose_num = res.lose_num;
            if (lose_num) {
                $("#lose_num").html(lose_num);
            }
            // {#实到人数#}
            var people_num = res.people_num;
            if (people_num) {
                $("#people_num").html(people_num);
            }
            // {#值班首长#}
            var leader_name = res.leader_name;
            if (leader_name) {
                $("#leader_name").text(leader_name);
            }
            // {#备注#}
            var status = res.status1;
            if (status) {
                $("#status").html(status);
            }
            var weather = res.weather;
            if (weather) {
                $("#weather").html('{{ now_time }}' + weather);
            }
        });
    });
</script>
</body>

</html>
